{% extends "administrative/base.html" %}

{% block page_link %}
    <script src="../../static/administrative/js/examination-vehicle.js"></script>
    <link rel="stylesheet" href="../../static/technological/css/style.css">
{% endblock %}


{% block style %}
    <style>
        .add_class {
            background: #1E90FF;
        }

        tr {
            height: 35px;
        }

        th {
            text-align: center;
        }

        table {
            table-layout: fixed;
        }

        td:first-child, th:first-child {
            position: sticky;
            left: 0; /* 首行永远固定在左侧 */
            z-index: 1;
        }

        thead tr th {
            position: sticky;
            top: 0; /* 列首永远固定在头部  */
            background-color: #E8E8E8;
        }

        th:first-child {
            z-index: 2;
        }

        .basic-tabs {
            box-shadow: 0 1.5px 0 0 #1E90FF;
            color: #1E90FF;
        }

        .basic {
            width: 8%;
            height: 40px;
            line-height: 40px;
            text-align: center;
            display: inline-block;
            vertical-align: top;
            cursor: pointer;
        }

        .input-style {
            display: inline-block;
            width: 73%;
            height: 35px;
            border-radius: 7px;
            font-size: 14px;
            padding-left: 1%;
            border: #cfcfcf solid 1px;
            margin-left: 1%;
        }

        .textarea-style {
            display: inline-block;
            width: 73%;
            border-radius: 7px;
            font-size: 14px;
            padding-left: 1%;
            border: #cfcfcf solid 1px;
            margin-left: 1%;
        }

        .halving_line {
            width: 80%;
            border: #cfcfcf solid 0.5px;
            margin-left: 2%;
        }

        .label_tag {
            width: 100px;
            text-align: right;
            vertical-align: top;
            font-size: 14px;
            line-height: 35px;
        }

        .add-station {
            width: 60%;
            height: 35px;
            background: #0070c1;
            border-color: #c5dbec;
            color: #ffffff;
        }

        .model_li {
            color: #3f414d;
            width: 25%;
            cursor: pointer;
            display: none;
        }

        .input-style {
            display: inline-block;
            width: 100%;
            height: 35px;
            font-size: 14px;
            border: none;
            background: #e8edf4;
        }
    </style>
{% endblock %}



{% block right_content %}
    <div class="headline">
        <div style="width: 15%;height: 100%;line-height: 40px;float: left;padding-left: 1%;">
            <a href="#" style="color: #0b0b0b;">
                <i class="iconfont icon-wodeshenqing"></i>
                <span> 我的待办</span><span> > </span><span> 详情</span>
            </a>
        </div>
    </div>


    <div style="width: 100%;height: 40px;padding-left: 3%;box-shadow: 0 1px 0 0 #CFCFCF;">

        <div id="create-menu" class="basic basic-tabs" onclick="Control_navigation(this.id)">
            申请详情
        </div>

        <div id="flow-status" class="basic" onclick="Control_navigation(this.id)">
            流程状态
        </div>
    </div>


    <div id="menu_from" style="width: 100%;height: 90%;overflow: auto;margin-top: 2px;">
        <div style="width: 75%;height: 100%;margin-top: 0.2%;color: #2C3E50;display: inline-block;vertical-align: top;background: white;">
            <h3 id="form_name" style="text-align: center;font-size: 20px;margin-top: 1%;">公务用车使用审批单</h3>

            <div style="width: 100%;height: 100%;display: inline-block;vertical-align: center;">
                <div style="width: 100%;height: 85%;overflow: auto;">
                    <div style="width: 95%;margin-left: 2.5%;margin-top: 1%;height: 40px;padding-left: 0.5%;line-height: 40px;background: #dfdfdf;">
                        基本信息
                    </div>

                    <div style="width: 95%;margin-left: 2.5%;">
                        <table style="width: 100%;">
                            <tr style="margin-left: 1%;">
                                <td style="width: 8%;border: #cfcfcf solid 0.5px;text-align: right;height: 35px;line-height: 35px;">
                                    申请人：
                                </td>
                                <td id="applicat"
                                    style="width: 30%;height: 35px;line-height: 35px;padding-left: 1%;border: #cfcfcf solid 0.5px;">{{ car_apply.applicat }}</td>

                                <td style="width: 8%;border: #cfcfcf solid 0.5px;text-align: right;height: 35px;line-height: 35px;">
                                    申请部门：
                                </td>
                                <td id="department"
                                    style="width: 30%;border: #cfcfcf solid 0.5px;padding-left: 1%;line-height: 35px;">{{ car_apply.department }}</td>
                            </tr>

                            <tr style="margin-left: 1%;">
                                <td style="width: 8%;border: #cfcfcf solid 0.5px;height: 35px;line-height: 35px;text-align: right;">
                                    用车责任人：
                                </td>
                                <td style="width: 30%;height: 35px;line-height: 35px;padding-left: 1%;border: #cfcfcf solid 0.5px;">
                                    {{ car_apply.proposer }}
                                </td>

                                <td style="width: 8%;border: #cfcfcf solid 0.5px;height: 35px;line-height: 35px;text-align: right;">
                                    申&nbsp; 请&nbsp;日&nbsp;期：
                                </td>
                                <td id="now_time"
                                    style="width: 30%;height: 35px;line-height: 35px;padding-left: 1%;border: #cfcfcf solid 0.5px;">{{ car_apply.create_time }}</td>
                            </tr>
                        </table>
                    </div>

                    <div style="width: 95%;margin-left: 2.5%;height: 40px;padding-left: 0.5%;line-height: 40px;margin-top: 1%;background: #dfdfdf;">
                        申请详情
                    </div>

                    <div style="width: 95%;margin-left: 2.5%;;">
                        <table style="width: 100%;">
                            <tr style="margin-left: 1%;">
                                <td style="width: 8%;border: #cfcfcf solid 0.5px;height: 35px;line-height: 35px;text-align: right;">
                                    用&nbsp; 车&nbsp;时&nbsp;间：
                                </td>
                                <td id="lord_send_unit"
                                    style="width: 30%;border: #cfcfcf solid 0.5px;height: 35px;line-height: 35px;padding-left: 1%;">
                                    {{ car_apply.start_time }}
                                </td>
                                <td style="width: 38%;border: #cfcfcf solid 0.5px;height: 35px;line-height: 35px;padding-left: 1%;">
                                    {{ car_apply.end_time }}
                                </td>
                            </tr>
                        </table>


                        <table style="width: 100%;">
                            <tr style="margin-left: 1%;">
                                <td style="width: 8%;border-right: #cfcfcf solid 0.5px;border-left: #cfcfcf solid 0.5px;border-bottom: #cfcfcf solid 0.5px;height: 35px;line-height: 35px;text-align: right;">
                                    行&nbsp; 程&nbsp;路&nbsp;线：
                                </td>
                                <td id="itinerary"
                                    style="width: 30%;border-right: #cfcfcf solid 0.5px;border-left: #cfcfcf solid 0.5px;border-bottom: #cfcfcf solid 0.5px;height: 35px;line-height: 35px;padding-left: 1%;">{{ car_apply.itinerary }}</td>

                                <td style="width: 8%;border-right: #cfcfcf solid 0.5px;border-left: #cfcfcf solid 0.5px;border-bottom: #cfcfcf solid 0.5px;text-align: right;height: 35px;line-height: 35px;">
                                    行驶里程：
                                </td>
                                <td id="travlled_distance"
                                    style="width: 30%;border-right: #cfcfcf solid 0.5px;border-left: #cfcfcf solid 0.5px;border-bottom: #cfcfcf solid 0.5px;padding-left: 1%;line-height: 35px;">{{ car_apply.travlled_distance }}</td>
                            </tr>
                        </table>

                        <table style="width: 100%;">
                            <tr style="margin-left: 1%;">
                                <td style="width: 8%;border-right: #cfcfcf solid 0.5px;border-left: #cfcfcf solid 0.5px;border-bottom: #cfcfcf solid 0.5px;height: 35px;line-height: 35px;text-align: right;">
                                    同&nbsp; 行&nbsp;人&nbsp;员：
                                </td>
                                <td id="field"
                                    style="width: 68%;border-right: #cfcfcf solid 0.5px;border-left: #cfcfcf solid 0.5px;border-bottom: #cfcfcf solid 0.5px;height: 35px;line-height: 35px;padding-left: 1%;">{{ car_apply.field_people }}</td>
                            </tr>
                        </table>

                        <table style="width: 100%;">
                            <tr style="margin-left: 1%;">
                                <td style="width: 8%;border-right: #cfcfcf solid 0.5px;border-left: #cfcfcf solid 0.5px;border-bottom: #cfcfcf solid 0.5px;height: 35px;line-height: 35px;text-align: right;">
                                    用&nbsp; 车&nbsp;事&nbsp;由：
                                </td>
                                <td id="car_marks"
                                    style="width: 68%;border-right: #cfcfcf solid 0.5px;border-left: #cfcfcf solid 0.5px;border-bottom: #cfcfcf solid 0.5px;height: 35px;line-height: 35px;padding-left: 1%;">{{ car_apply.marks }}</td>
                            </tr>
                        </table>
                    </div>

                    <div id="approval_opinion"
                         style="width: 95%;margin-left: 2.5%;height: 40px;padding-left: 0.5%;line-height: 40px;margin-top: 1%;background: #dfdfdf;">
                        审批意见
                    </div>

                    <div id="leader_opinion" style="width: 95%;margin-left: 2.5%;">
                        <table id="kongzhuren" style="width: 100%;">
                            <tr style="margin-left: 1%;">
                                <td style="width: 8%;border-right: #cfcfcf solid 0.5px;border-left: #cfcfcf solid 0.5px;border-bottom: #cfcfcf solid 0.5px;height: 35px;line-height: 35px;text-align: right;">
                                    拟&nbsp; 派&nbsp;车&nbsp;辆：
                                </td>
                                <td id="car_drive_num"
                                    style="width: 30%;border-right: #cfcfcf solid 0.5px;border-left: #cfcfcf solid 0.5px;border-bottom: #cfcfcf solid 0.5px;height: 35px;line-height: 35px;padding-left: 1%;">
                                    <select class="input-style" name="car_num" id="car_num"
                                            style="width: 98%;background: white;" onchange="change_car()">
                                        {% for all_datum in data_list %}
                                            <option value="{{ all_datum.car_id }},{{ all_datum.car_num }}">{{ all_datum.car_num }}</option>
                                        {% endfor %}
                                    </select>
                                </td>

                                <td style="width: 8%;border-right: #cfcfcf solid 0.5px;border-left: #cfcfcf solid 0.5px;border-bottom: #cfcfcf solid 0.5px;height: 35px;line-height: 35px;text-align: right;">
                                    司机姓名：
                                </td>
                                <td id="car_drive"
                                    style="width: 30%;border-right: #cfcfcf solid 0.5px;border-left: #cfcfcf solid 0.5px;border-bottom: #cfcfcf solid 0.5px;height: 35px;line-height: 35px;padding-left: 1%;"></td>
                            </tr>
                        </table>

                        <table id="zhouyuanzhnag" style="width: 100%;">
                            <tr style="margin-left: 1%;">
                                <td style="width: 8%;border-right: #cfcfcf solid 0.5px;border-left: #cfcfcf solid 0.5px;border-bottom: #cfcfcf solid 0.5px;height: 100px;line-height: 35px;text-align: center;">
                                    党政办主任：
                                </td>
                                <td style="width: 68%;border-right: #cfcfcf solid 0.5px;border-left: #cfcfcf solid 0.5px;border-bottom: #cfcfcf solid 0.5px;line-height: 35px;padding-left: 1%;padding-right: 1%;">
                                    <textarea id="synopsis" rows="5"
                                              style="padding-left: 1%;height: 150px;width: 100%;border: none;outline: none;-webkit-appearance: none;color: #0b0b0b;"
                                              placeholder="请输入驳回理由"></textarea>
                                    <div id="img_signature" style="width: 100%;height: 100%;display: none;"></div>
                                </td>
                            </tr>
                            <tr style="margin-left: 1%;">
                                <td style="width: 8%;height: 100px;border-right: #cfcfcf solid 0.5px;border-left: #cfcfcf solid 0.5px;border-bottom: #cfcfcf solid 0.5px;line-height: 35px;text-align: center;">
                                    分管领导意见：
                                </td>
                                <td style="width: 68%;border-right: #cfcfcf solid 0.5px;border-left: #cfcfcf solid 0.5px;border-bottom: #cfcfcf solid 0.5px;height: 35px;line-height: 35px;padding-left: 1%;padding-right: 1%;">
                                    <textarea id="synopsis_1" rows="5"
                                              style="padding-left: 1%;height: 150px;width: 100%;border: none;outline: none;-webkit-appearance: none;color: #0b0b0b;"
                                              placeholder="请输入驳回理由"></textarea>
                                </td>
                            </tr>
                        </table>
                    </div>
                </div>

                <div style="width: 100%;height: 5%;text-align: center;margin-top: 1%;">
                    <button onclick="submit_approval(2)"
                            style="width: 10%;border-radius: 3px;border: red solid 0.5px;background: red;color: white;">
                        驳回
                    </button>
                    <button onclick="submit_approval(1)"
                            style="width: 10%;border-radius: 3px;border: #1E90FF solid 0.5px;background: #1E90FF;color: white;">
                        同意
                    </button>
                </div>

            </div>
        </div>

        <div style="width: 23%;height: 100%;display: inline-block;vertical-align: top;background: white;margin-top: 0.2%;">
            <div style="width: 100%;text-align: center;margin-top: 4%;">
                <button style="border: #cfcfcf solid 0.5px;border-radius: 7px;width: 50%;height: 40px;color: green;"><i
                        class="iconfont icon-kaishi"></i>开始
                </button>
            </div>
            <div style="width: 100%;text-align: center;font-size: 28px;">&#8595;</div>
            <div style="width: 100%;text-align: center;">
                <button id="kong" style="border: #cfcfcf solid 0.5px;border-radius: 7px;width: 70%;height: 40px;">党政办主任
                    (孔智慧)
                </button>
            </div>
            <div style="width: 100%;text-align: center;font-size: 28px;">&#8595;</div>
            <div style="width: 100%;text-align: center;">
                <button id="zhou" style="border: #cfcfcf solid 0.5px;border-radius: 7px;width: 70%;height: 40px;">分管领导
                    (周剑)
                </button>
            </div>
            <div style="width: 100%;text-align: center;font-size: 28px;">&#8595;</div>
            <div style="width: 100%;text-align: center;">
                <button style="border: #cfcfcf solid 0.5px;border-radius: 7px;width: 50%;height: 40px;color: green;"><i
                        class="iconfont icon-jieshu"></i>结束
                </button>
            </div>
        </div>
    </div>

    <!-- 流程状态 -->
    <div id="process_status" style="width: 100%;height: 88%;display: none;margin-top: 0.2%;">
        <div style="height: 88%;width: 100%;overflow: auto;">
            <table class="table table-hover table-bordered" style="border-collapse: collapse;width: 100%;">
                <thead>
                <tr>
                    <th scope="col" style="width: 8%;">序号</th>
                    <th scope="col" style="width: 8%;">节点</th>
                    <th scope="col" style="width: 8%;">操作状态</th>
                    <th scope="col" style="width: 8%;">意见</th>
                </tr>
                </thead>
                <tbody style="overflow: auto;" id="t_table1"></tbody>
            </table>
        </div>
    </div>


{% endblock %}

{% block script %}
    <script type="text/javascript" src="../../static/public_file/other/jquery.js"></script>
    <script src="../../static/administrative/layDate-v5.0.9/laydate/laydate.js"></script> <!-- 改成你的路径 -->
    <script type="text/javascript">
        lay('#version').html('-v' + laydate.v);

        //执行一个laydate实例
        laydate.render({
            elem: '#car_start' //指定元素
        });

        //执行一个laydate实例
        laydate.render({
            elem: '#car_end' //指定元素
        });

        var property = {};
        var demo;
        var Minutes = new Date().getUTCMinutes();
        if (Minutes < 10) {
            Minutes = '0' + String(Minutes)
        }

        var Seconds = new Date().getSeconds();
        if (Seconds < 10) {
            Seconds = '0' + String(Seconds)
        }

        var Month = new Date().getMonth();
        if (Month < 9) {
            Month = '0' + String(Month + 1)
        } else {
            Month += 1
        }

        var Day = new Date().getDate();
        if (Day < 10) {
            Day = '0' + String(Day)
        }
        var now_date = new Date().getFullYear() + '-' + Month + '-' + String(Day) + " " + new Date().getHours() + ":" + Minutes + ":" + Seconds;
        document.getElementById("now_time").innerText = now_date;

        var display_flag = '{{ display_flag | safe }}';
        var present_status = {{ present_status | safe }};


        if (!display_flag) {
            document.getElementById("synopsis_1").setAttribute("disabled", false)
            document.getElementById("kong").style.color = "#00FF7F";
        } else {
            document.getElementById("kongzhuren").style.display = "block";
            document.getElementById("zhouyuanzhnag").style.display = "block";
            document.getElementById("zhou").style.color = "#00FF7F";
            document.getElementById("car_drive_num").innerHTML = '{{ car_apply.car_num | safe }}';
            document.getElementById("car_drive").innerHTML = '{{ car_apply.driver_name | safe }}';
            document.getElementById("synopsis").style.display = "none";
            var img_signature = document.getElementById("img_signature");
            var img_tag = document.createElement("img");
            img_tag.setAttribute("src", present_status["孔智慧"][present_status["孔智慧"].length - 1]["img_signature"])
            img_signature.appendChild(img_tag);
            img_signature.style.display = "block";
        }

        var drive_dict = {{ drive_dict | safe }};
        var car_num = document.getElementById("car_num");
        if (car_num) {
            document.getElementById("car_drive").innerHTML = drive_dict[car_num.value.split(",")[1]];
        }

        function change_car() {
            var car_num = document.getElementById("car_num").value.split(",")[1];
            document.getElementById("car_drive").innerHTML = drive_dict[car_num];
        }

        var t_table1 = document.getElementById("t_table1");
        var bunber = 0;
        for (var j = 0; j < Object.keys(present_status).length; j++) {
            var key = Object.keys(present_status)[j];
            for (var TT = 0; TT < present_status[key].length; TT++) {          //
                bunber += 1;
                var tr = document.createElement("tr");
                var td = document.createElement("td");
                var td1 = document.createElement("td");
                var td2 = document.createElement("td");
                var td3 = document.createElement("td");
                td.innerHTML = bunber;
                td.style.textAlign = "center";
                td1.innerHTML = key;
                td1.style.textAlign = "center";
                td2.innerHTML = present_status[key][TT]["status"];
                td2.style.textAlign = "center";
                td3.innerHTML = JSON.stringify(present_status[key][TT]["opinion"]);
                td3.style.paddingLeft = "1%";
                tr.appendChild(td);
                tr.appendChild(td1);
                tr.appendChild(td2);
                tr.appendChild(td3);
                t_table1.appendChild(tr);
            }
        }

        function click_ul3() {
            if (document.getElementById("jiantou3").className === "iconfont icon-jiantou-shang") {
                document.getElementById("jiantou3").className = "iconfont icon-jiantou-xia";
                document.getElementById("issue_approval_ul").style.display = "inline-block";
            } else {
                document.getElementById("jiantou3").className = "iconfont icon-jiantou-shang";
                document.getElementById("issue_approval_ul").style.display = "none";
            }
        }

        function get_node_currt() {
            for (var j = 0; j < Object.keys(present_status).length; j++) {
                var key = Object.keys(present_status)[j];
                if (present_status[key]["status"] === "未处理") {
                    return key
                }
            }
        }

        function submit_approval(vis_type) {
            if (!display_flag) {
                var node_currt = "孔智慧";
            } else {
                node_currt = "周剑";
            }
            var car_num_1 = document.getElementById("car_num");         // 车牌号
            if (car_num_1) {
                car_num = car_num_1.value;
            } else {
                car_num = "{{ car_apply.yuanshi_car_num | safe }}";
            }
            var driver_name = document.getElementById("car_drive").innerText;     // 司机名称

            if (!display_flag) {
                var apply_opinion = document.getElementById("synopsis").value;     // 审批意见
            } else {
                apply_opinion = document.getElementById("synopsis_1").value;     // 审批意见
            }
            if (apply_opinion === "" && vis_type === 2) {
                alert("请填写驳回原因！")
                return false
            }

            var apply_id = window.location.href.split("id=")[1].replace("#", '');
            var xhr = new XMLHttpRequest();
            var local_host = window.location.host;          // 获取当前IP
            xhr.open('post', "/administrative/car_approve", true);
            xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded');
            xhr.send("apply_id=" + String(apply_id) + "&car_num=" + String(car_num) + "&driver_name=" + String(driver_name) + "&apply_opinion=" + String(apply_opinion) + "&node_currt=" + String(node_currt) + "&vis_type=" + String(vis_type));
            xhr.onreadystatechange = function () {
                if (xhr.readyState === 4) {
                    if (xhr.status === 200) {
                        document.getElementById("loading").style.display = "none";
                        var JsonDate = JSON.parse(xhr.responseText);
                        alert("审批成功！");
                        window.location = "/administrative/Vehicle_to_do.html";
                    }
                }
            };
        }

        function click_ul_9() {
            if (document.getElementById("jiantou5").className === "iconfont icon-jiantou-shang") {
                document.getElementById("jiantou5").className = "iconfont icon-jiantou-xia";
                document.getElementById("dispatch-Administrator-1").style.display = "inline-block";
            } else {
                document.getElementById("jiantou5").className = "iconfont icon-jiantou-shang";
                document.getElementById("dispatch-Administrator-1").style.display = "none";
            }
        }

        function click_ul_10() {
            if (document.getElementById("jiantou4").className === "iconfont icon-jiantou-shang") {
                document.getElementById("jiantou4").className = "iconfont icon-jiantou-xia";
                document.getElementById("dispatch-Administrator").style.display = "inline-block";
            } else {
                document.getElementById("jiantou4").className = "iconfont icon-jiantou-shang";
                document.getElementById("dispatch-Administrator").style.display = "none";
            }
        }
    </script>
{% endblock %}
